<template>
  <div class="warpper">
    <div v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)">
      <img src="../../static/image/point.png" alt="" :class="`point-img`" :style="dataPointStyles[index]"
           v-if="item.id !== 17">
      <div :class="`btn`" :style="dataImgStyles[index]" v-if="item.id !== 17">{{item.name}}</div>
      <img class="last-img" src="../../static/image/last.png" alt="" v-if="item.id === 17">
    </div>
  </div>
</template>

<script>
import swipeComponent from '../components/swpie'
import {Toast} from 'mint-ui'

export default {
  name: 'home',
  components: {
    swipeComponent
  },
  data () {
    return {
      loadedVisible: false,
      backClickCount: 0,
      dataPointStyles: [],
      dataImgStyles: [],
      dataList: [
        {id: 1, name: '额伊特湖 (大天鹅湖)'},
        {id: 2, name: '阿布什格湖'},
        {id: 3, name: '布日呼图湖'},
        {id: 4, name: '巴格达布苏湖'},
        {id: 5, name: '吉格尔其库湖'},
        {id: 6, name: '阿德格伊克尔湖'},
        {id: 7, name: '额肯伊克尔湖'},
        {id: 8, name: '天鹅湖景区沙金园度假村'},
        {id: 9, name: '查干布湖'},
        {id: 10, name: '乌库太湖'},
        {id: 11, name: '霍林高勒湖'},
        {id: 12, name: '通格图湖'},
        {id: 13, name: '温布中转站'},
        {id: 14, name: '天鹅湖游客接待中心'},
        {id: 15, name: '天鹅湖蒙古大营'},
        {id: 16, name: '与沙共舞'},
        {id: 17, name: '巴彦浩特镇'}]
    }
  },
  mounted () {
    console.log('home vue has benn created')
    document.addEventListener('backbutton', this.onBackKeyDown, false)
    this.loadDataStyles()
  },
  destroyed () {
    document.removeEventListener('backbutton', this.onBackKeyDown)
  },
  methods: {
    toDetail (id) {
      console.log(id)
      this.$router.push({path: `/model/${id}`})
    },
    loadDataStyles () {
      let objStr = localStorage.getItem('dataStyles')
      let obj = JSON.parse(objStr)
      this.dataPointStyles = obj.pointStyles
      this.dataImgStyles = obj.imgStyles
    },
    loadedPopup () {
      console.log('open popup windows')
      this.loadedVisible = true
      setTimeout(function () {
        console.log('close popup windows')
        this.loadedVisible = false
      }, 1500)
    },
    onBackKeyDown () {
      console.log('backbutton was pressed')
      console.log(this.$route.path)
      let currentPath = this.$route.path
      if (currentPath === '/home') {
        Toast({
          message: '双击退出程序',
          position: 'middle',
          duration: 1500
        })
        this.backClickCount++
        if (this.backClickCount >= 2) {
          localStorage.removeItem('inited')
          navigator.app.exitApp()
        }
        setTimeout(() => {
          this.backClickCount = 0
        }, 800)
      } else {
        navigator.app.backHistory()
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .warpper
    margin 0
    padding 0
    position relative
    width 100%
    height 100%
    background-image url("../../static/image/new_bg.jpg")
    background-repeat no-repeat
    background-position center
    background-size cover

    .point-img
      width 30px
      height auto
      position absolute
      z-index 11
      animation jump 1.5s infinite
      -webkit-animation jump 1.5s infinite

    @keyframes jump {
      0% {
        transform: translate(0px, 0px)
      }
      50% {
        transform: translate(0px, -10px)
      }
      100% {
        transform: translate(0px, 0px)
      }
    }
    .btn
      position absolute
      padding 6px 8px
      background #E1AB00
      font-size 16px
      color #030000
      box-shadow 0px 2px 2px #444445
      border-radius 4px
    .last-img
      position absolute
      bottom 38px
      right 14px
      width 44px
      z-index 11
</style>
